<script lang="ts" setup>
import { contactsListFn } from '@/api/orderAssign';
import { log } from 'console';
import type { color } from 'echarts';

import { ref } from 'vue';
export interface iArr {
  proname: string
  location:string
  num:number,
  nopress:number,
  warning:string,
  type:string,
  name:string,
  phone: number
  detail:string
  isnow:string
}
const tableData = ref<iArr[]>([]);
    const arr = ref<iArr | null>(null);
 
contactsListFn().then(res=>{
    tableData.value=res.data
})
function dataclick(item:any){
    console.log(item);
    arr.value=item
   
    
}
const textarea=ref('')
const value = ref('')
const options = [
  {
    value: '-请选择维修人员-',
    label: '-请选择维修人员-',
  },
  {
    value: '张三',
    label: '张三'
  },
  {
    value: '李四',
    label: '李四',
  },
  {
    value: '王五',
    label: '王五',
  },
  {
    value: '老李',
    label: '老李',
  },
]
const value1 = ref('')
const options1 = [
  {
    value: '限时维修',
    label: '限时维修',
  },
  {
    value: '响应客户',
    label: '响应客户'
  },
  {
    value: '现场查看',
    label: '现场查看',
  },
  {
    value: '其他',
    label: '其他',
  },
  {
    value: '请选择维修方式',
    label: '请选择维修方式',
  },
]
</script>
<template>

    <div class="box">
    <div class="tabletitle">
    <el-button class="tablebutton">故障预报警地图</el-button>

  <div class="selectbox">
    <el-dropdown>
    <el-button type="primary" disabled  class="timedisabled">
      2019-4-16<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="disabled-dropdown-menu">
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-dropdown>
    <el-button type="primary" disabled  class="timedisabled">
      全部区域<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="disabled-dropdown-menu">
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-dropdown>
    <el-button type="primary" disabled  class="timedisabled">
      请选择日期范围<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="disabled-dropdown-menu">
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </div>
    </div>
        <el-table :data="tableData" style="width: 68%"  @row-click="dataclick">
      <el-table-column prop="proname" label="项目名称" width="240" />
      <el-table-column
        prop="warning"
        label="预警级别"
        width="90"
      >
        <template #default="scope">
          <div :style="{ backgroundColor: scope.row.warning=='紧急' ? 'red' : scope.row.warning=='超标'?'#eecb5f' : scope.row.warning=='保养'?'#66cc99':'transparent ', color:'white',textAlign:'center'}">
            {{ scope.row.warning }}
          </div>
        
        </template>
      </el-table-column>
      <el-table-column prop="name" label="联系人" width="240" />
      <el-table-column prop="phone" label="联系方式" width="240" />
      <el-table-column prop="detail" label="描述" width="240" />
      
      <el-table-column label="状态" width="90">
        <template #default="scope">
          <el-image style="width:20px;height:20px" :src="scope.row.isnow" />
        </template>
      </el-table-column>
    </el-table>
    <div class='right'>
    <div class="iconbox">
    <el-image class="iconleft" src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E7%BB%B4%E6%8A%A4%E6%89%98%E7%AE%A1/u4017.png"></el-image>
    <div class="iconmiddle">---</div>
    <el-image class="iconright" src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E7%BB%B4%E6%8A%A4%E6%89%98%E7%AE%A1/u4018.png"></el-image>
    </div>
    <div class="content"><div class="contenttitle">位置</div><div class="contents">{{ arr?.location }}</div> </div>
    <div class="content"><div  class="contenttitle">供水设备数量</div><div class="contents">{{ arr?.num }}</div> </div>
    <div class="content"><div  class="contenttitle">设备类型</div><div class="contents">罐式无负压×{{ arr?.nopress }}</div></div>
    <div class="content"><div  class="contenttitle">故障上报类别</div class="contents"><div class="contents">自动检测</div></div>
    <div class="content"><div class="contenttitle">故障类别</div><div class="contents">{{ arr?.type}}</div></div>
    <div class="content"><div  class="contenttitle">级别</div><div class="contents">{{ arr?.warning }}</div></div>
    <div class="reason">
    <div class="reasontitle">故障描述</div>
    <div class="reasoncontent">{{ arr?.detail }}</div>
    </div>
    <div class="login">派工维修登记</div>
    <div class="content"><div  class="contenttitle">指派维修员</div><div class="select"> 
        <el-select v-model="value" placeholder="-请选择维修人员-" style="width: 160px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"

    />
  </el-select>
  </div></div>
  <div class="content"><div  class="contenttitle">维修方式</div><div class="select"> 
        <el-select v-model="value1" placeholder="-请选择维修方式-" style="width: 160px">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value"

    />
  </el-select>
  </div></div>
  <div class="talkingabout">
  <div class="talkingtitle">派工留言</div>
  <el-input v-model="textarea" type="textarea"  :autosize="{ minRows: 2, maxRows: 8 }" style="width: 90%;height:180px ;margin:10px 5% ;border:1px solid " placeholder="请输入要求" />
  <el-button class="talkingbutton">确定</el-button>
  </div>
    </div> 

    </div>
</template>
<style lang="scss" scoped>
.box{
    width: 100%;
    position: relative;
}
.tabletitle{
width: 68%;
height: 60px;
position: relative;

background-color: aqua;
.tablebutton{
    border-radius: 18px;
    height: 40px;
    background-color: #66cc99;
    color: white;
    position: absolute;
    left: 10px;
    top:10px;
}
.selectbox{
    position: absolute;
    
    left: 260px;
    top:10px;
    display: flex;

    .timedisabled{
    width: 220px;
    height: 40px;
 
    background-color: white;
    color: #cccccc;
}
}

}
.right{
    position: absolute;
    width: 20%;
    height: 1093px;

    top: 0;
    right: 198px;
    .iconbox{
        width: 100%;
        height: 60px;
        background-color: white;
        position: relative;
        left: 5px;
        .iconleft{
            position: absolute;
            left: 20px;
            top:15px 
        }
        .iconmiddle{
            position: absolute;
            left: 150px;
            top:20px 
        }
        .iconright{
            position: absolute;
            right: 20px;
            top:15px  
        }
    }
    .content{
        width: 100%;
        height: 50px;
        background-color: white;
        margin: 5px;
        position: relative;
        .contenttitle{
            position: absolute;
            font-size: 14px;
            left: 25px;
            top: 16px
        }
        .contents{
            position: absolute;
            font-size: 14px;
            right: 25px;
            top: 16px
        }
        .select{

            position: absolute;
            font-size: 14px;
            right: 5px;
            top: 10px
        }
    }
    .reason{
        width: 100%;
        height: 200px;
        background-color: white;
        margin: 5px;
        position: relative;
        .reasontitle{
            position: absolute;
            top: 5px;
            left:40%;
        }
        .reasoncontent{
            border: 5px double;
            width: 80%;
            height: 120px;
            position: absolute;
            left: 10%;
            top:50px
        }
    }
    .login{
        width: 100%;
        height: 60px;
        background-color: white;
        margin: 5px;
        text-align: center;
        line-height: 60px;
  
    }
}
.talkingabout{
    width: 100%;
        height: 280px;
        background-color: white;
        margin: 5px;
        .talkingtitle{
            text-align: center;
            padding-top: 20px
        }
        .talkingbutton{
            background-color: #169bd5;
            color: white;
            width: 200px;
            height: 40px;
            margin: 0 65px;
        }
}
</style>